---
title: Guidelines
redirect_from:
  - /components/inputgroup/
---

import InputBackgroundLinkSnippet from "snippets/input-background-link.mdx";
import InputHelpErrorSnippet from "snippets/input-help-error.mdx";
import InputLabelsSnippet from "snippets/input-labels.mdx";
import InputPlaceholderSnippet from "snippets/input-placeholder.mdx";

<ReactExample exampleId="InputGroup-default" />

## When to use

- To group multiple input fields for related information
  such as a date of birth with a day, a month, and a year.
- To label and validate the group as a whole, rather than just individual fields.

## When not to use

- For information that can't be presented as a single unit---use the appropriate field for the data type, such as:
  - [Input field](/components/input/inputfield/)
  - [Select](/components/input/select/)
  - [Input file](/components/input/inputfile/)

## Component status

<ComponentStatus component="InputGroup" />

## Content structure

![Label: provides a clear description of what users should fill in; input divider: clearly separates inputs within the group; Select (component): specifies options users can choose from. InputField (component): specifies one type of input expected of users; error: guides users on how to solve any problems and overrides errors for individual inputs in the group.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:76%3A1011)

## Behavior

### Use for closely related fields

Input groups override the settings of individual fields to present a coherent whole.
This means they're great for a couple of fields that make a single unit.

They're not good at grouping many fields,
such as everything that goes into building an address.
For those cases, use visual spacing, logical headers, and other structure
to make it clear what fields are related.
See more about [designing forms](/design-patterns/designing-forms/).

## Content

<InputLabelsSnippet />

<InputHelpErrorSnippet />

<!-- eslint-disable -->

#### Error and Help messages

<ReactExample exampleId="InputGroup-states" />

<InputPlaceholderSnippet />

The placeholder text must be added to each field, rather than the input group as a whole.

## Look & feel

<InputBackgroundLinkSnippet />
